import React from 'react';
import styles from './UserList.css';
import {Table, Pagination} from 'antd'

import {routerRedux} from 'dva/router';
import {PAGE_SIZE} from "../models/const";

import './UserList.less'
import {connect} from "dva";

function UserList({dispatch, users}) {
  function onPageChange(page) {
    dispatch(routerRedux.push({
      pathname: '/users',
      query: {page},
    }));
  }

  function pageChangeHandler(page) {
    dispatch(routerRedux.push({
      pathname: '/users',
      query: {page},
    }));
  }


  const columns = [
    {title: 'userId', dataIndex: 'user_id', key: 'user_id',},
    {title: 'imei', dataIndex: 'imei', key: 'imei',},
    {title: 'imsi', dataIndex: 'imsi', key: 'imsi',},
    {title: 'proxy', dataIndex: 'proxy', key: 'proxy',},
    {title: 'money', dataIndex: 'money', key: 'money',},
    {title: 'referer', dataIndex: 'referer', key: 'referer',},
    {title: 'total_money', dataIndex: 'total_money', key: 'total_money',},
  ];

  return (
    <div className={styles.normal}>
      <Table
        bordered={true}
        columns={columns}
        dataSource={users.list}
        pagination={false}
      />
      <Pagination
        className="ant-table-pagination"
        total={6000}
        pageSize={PAGE_SIZE}
        onChange={pageChangeHandler}
      />
    </div>
  );
}

function mapStateToProps({dispatch, users}) {
  return {
    dispatch, users
  }
}

export default connect(mapStateToProps)(UserList);
